<template>
  <div id="app">
    <el-container>
      <el-header>
        <div
          style="
            margin-top: 20px;
            text-align: left;
            font-size: 20px;
            color: azure;
          "
        >
          <span style="font-size: 12pt">ERP&MES生产制造管理综合系统</span>
        </div>
      </el-header>

      <el-container>
        <el-aside width="250px">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            router
          >
            <el-sub-menu
              :index="item.Permission_Id"
              v-for="(item, index) in permissionList"
              :key="index"
            >
              <template #title>
                <el-icon><LocationInformation /></el-icon>
                <span>{{ item.Permission_Name }}</span>
              </template>
              <el-sub-menu
                :index="item1.Permission_Id"
                v-for="(item1, sunindex) in item.children"
                :key="sunindex"
              >
                <template #title>{{ item1.Permission_Name }}</template>
                <el-menu-item
                  v-for="(item2, index1) in item1.children"
                  :key="index1"
                  :index="item2.MenuUrl"
                  >{{ item2.Permission_Name }}</el-menu-item
                >
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";

const permissionList = ref([]);

const getPermissionList = () => {
  axios.get(`RBAC/GetMemusAll`).then((res) => {
    permissionList.value = res.data.Data;
  });
};

getPermissionList();
</script>

<style scoped>
#app {
  max-width: 100%;
  margin: 0 auto;
  padding: 0rem;
  font-weight: normal;
}

.el-header,
.el-footer {
  background-color: #186fe0;
  color: #333;
  text-align: left;
  line-height: 19px;
}

.el-aside {
  background-color: #66717d;
  color: #333;
  text-align: left;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
  width: 100%;
}

.el-container {
  margin-bottom: 40px;
}
.el-container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
</style>